﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="shortcut icon" href="images/ico.jpg" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>博客列表 - 52itstyle.top</title>
    <meta name="keywords" content="SpringBoot、微服务、Dubbo、项目源码、Java" />
    <meta name="description" content="SpringBoot、微服务、Dubbo、项目源码、Java" />
    <link rel='stylesheet'  href='css/style.css' type='text/css' media='all'/>
    <link rel='stylesheet'  href='css/lmlblog.css' type='text/css' media='all'/>
    <link rel='stylesheet'  href='css/all.css' type='text/css' media='all'/>
    <script type='text/javascript' src='js/jquery.min.js'></script>
    <style type="text/css">
        [v-cloak] {
             display: none;
        }
	</style>
</head>
<body>
<!--菜單-->
<div th:include="common/menu :: menu"></div>
<!-- menu-bar -->
<div style="clear: both;"></div>
<div class="lmlblog-member-main" id="app" v-cloak>
    <div class="lmlblog-member-bg">
        <div>
            <div class="lmlblog-member-content-list clear">
                <!--左側-->
                <div th:include="common/artlicle_left :: left"></div>
                <!--右側-->
                <div class="lmlblog-member-right">
                    <div v-for="item in blog" class="lmlblog-post-list">
                        <div class="lmlblog-posts-list words" style="background-image:url(images/044.png); ">
                            <!-- 动态内容部分，包括列表 -->
                            <div class="lmlblog-post-user-info">
                                <div class="lmlblog-post-user-info-avatar" user-data="1">
                                    <a  style="display: inline-block;">
                                        <span class="lmlblog-vip-icon"></span>
                                        <img src="picture/tx2.jpg" class="avatar"/>
                                        <i class="lmlblog-verify lmlblog-verify-a" title="司空琪"></i></a>
                                </div>
                                <div class="lmlblog-post-user-info-name">
                                    <a href="https://blog.52itstyle.vip">
                                        <font style="color:#333;font-weight:600">司空琪</font>
                                    </a>
                                    <span class="lmlblog-mark lmlblog-lv" title="经验：3815">Lv.6</span><span
                                        class="lmlblog-mark lmlblog-vip">VIP 6</span>
                                </div>
                                <div class="lmlblog-post-user-info-time">{{ item.createTime }}</div>
                            </div><!-- 作者信息 -->
                            <div class="lmlblog-post-setting">
                                <i class="fa fa-angle-down"></i>
                                <div class="lmlblog-post-setting-box">
                                    <ul>
                                        <a href="https://blog.52itstyle.vip" title="查看全文">
                                            <li>查看全文</li>
                                        </a>
                                        <a href="https://blog.52itstyle.vip" title="访问主页">
                                            <li>访问主页</li>
                                        </a>
                                    </ul>
                                </div>
                            </div>
                            <div class="lmlblog-post-content ">
                                <a class="post_list_link" target="_blank" v-bind:href="item.id+'.html'">
                                    {{ item.title }}
                                </a>
                            </div>
                            <div class="lmlblog-post-bar">
                                <li class="lmlblog-no-like">
                                    <i class="lmlblog-icon">&#xe608;</i> <span>{{ item.views }}</span>
                                </li>
                                <li>
                                    <i class="lmlblog-icon">&#xe633;</i> <span>7</span>
                                </li>
                                <li>
                                    <i class="lmlblog-icon"></i>评论 <span>0</span>
                                </li>
                                <li>
                                    <i class="lmlblog-icon">&#xe602;</i> <span>1.08w</span>
                                </li>
                            </div>
                            <div class="lmlblog-post-footer-bar">
                                <span>电脑端</span><i class="lmlblog-icon">&#xe62c;</i>
                            </div>
                        </div><!-- posts_list -->
                    </div>
                    <!-- posts_list -->
                    <div class="lmlblog-pager"><a class="lmlblog-pager-left" @click="page('pre')">上一页</a>
                        <div class="lmlblog-pager-center layui-form">
                            第 1 页
                        </div>
                        <a class="lmlblog-pager-right" @click="page('next')" >下一页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<div th:include="common/footer :: footer"></div>
</body>
<script type='text/javascript' src='js/base.js'></script>
<script type='text/javascript' src='js/plupload.full.min.js'></script>
<script type='text/javascript' src='js/vue.min.js'></script>
<script>
jQuery(document).ready(function($) {
    $.fn.smartFloat = function() {
        var position = function(element) {
            var top = element.position().top,
            pos = element.css("position");
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                } else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
        };
        return $(this).each(function() {
            position($(this));
        });
    };
    $(".lmlblog-member-left-bg-xg").smartFloat();
});
</script>
<script>
    var vm = new Vue({
        el : '#app',
        data : {
            param : {
                pageNo:1
            },
            blog : null
        },
        methods : {
            page : function(flag){
                if(flag==="next"){
                    this.param.pageNo = this.param.pageNo+1;
                }else if(flag=="pre"){
                    this.param.pageNo = this.param.pageNo-1;
                }
                var param = JSON.stringify(this.param);
                $.ajax({
                    url : "list",
                    data : param,
                    type : "post",
                    dataType : "json",
                    contentType : 'application/json',
                    success : function(data) {
                        if(data.code==0){
                            if(data.rows.content.length>0){
                                vm.blog = data.rows.content;
                                returnTop();
                            }
                        }
                    }
                });
            }
        },
        created : function() {
             this.page()
        }
    })
</script>
</html>